---
image: /generated/articles-docs-transitions-presentations-iris.png
crumb: '@remotion/transitions - Presentations'
title: 'iris()'
---

# iris()<AvailableFrom v="4.0.316"/>

A presentation where the next scene is revealed through a circular mask that expands from the center outward, similar to a camera iris opening.

<Demo type="iris" />

## Example

```tsx twoslash title="IrisTransition.tsx"
import {AbsoluteFill} from 'remotion';

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({children, color}) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 200,
        color: 'white',
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
import {linearTiming, TransitionSeries} from '@remotion/transitions';
import {iris} from '@remotion/transitions/iris';
import {useVideoConfig} from 'remotion';

const BasicTransition = () => {
  const {width, height} = useVideoConfig();

  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition presentation={iris({width, height})} timing={linearTiming({durationInFrames: 30})} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
```

## API

Accepts an object with the following options:

### `width`

Should be set to the width of the video.

### `height`

Should be set to the height of the video.

### `outerEnterStyle?`

The style of the outer element when the scene is is entering.

### `outerExitStyle?`

The style of the outer element when the scene is exiting.

### `innerEnterStyle?`

The style of the inner element when the scene is entering.

### `innerExitStyle?`

The style of the inner element when the scene is exiting.

## See also

- [Source code for this presentation](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/iris.tsx)
- [Presentations](/docs/transitions/presentations)
